<template>
	<view class="kind">
		<!-- tabbar -->
		<view class="tabbar-container">
			<view @tap="tabbarItemChange(index)" class="tabbar-item" v-for="(item,index) in tabbarList" :key="item.id">
				<view class="title" :class=" current===index ?'red':''"> {{item.name}} </view>
				<view class="arrow-container" v-if="index===1 || index===2">
					<uni-icons class="icons" type="top" :color="item.status==='up'?'#f00':'#fff'" size="12"></uni-icons>
					<uni-icons class="icons" type="bottom" :color="item.status==='down'?'#f00':'#fff'" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 渲染商品列表 -->
		<view class="product-list">
			<view @tap="goProductDeatail(item.id)" class="item" v-for="item in productList" :key="item.id">
				<image class="img" :src="item.pic" mode=""></image>
				<view class="item-info">
					<view class="name"> {{item.name}} </view>
					<view class="extra-info">
						<view class="price">￥{{item.price}}元</view>
						<view class="tag">不凡</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 没有更多数据 -->
		<view v-if="total<=productList.length"> 没有更多数据 </view>
	</view>
</template>

<script>
	import {
		findProductList
	} from '@/api/home/index.js'
	export default {
		name:"GoodsList",
		data() {
			return {
				current:0,//当前选中tabbar 下标
				categoryId:'',
				productList:[],
				isDesc:0, //  0默认降序; 1 升序 ,
				sortBy:'', // ,支持:price(价格),sale(销量)
				start:1,
				limit:6,
				total:0,
				tabbarList:[
					{
						id:1,
						status:'default', // default up down
						name:'新品'
					},
					{
						id:2,
						status:'default', // default up down
						name:'销量'
					},
					{
						id:3,
						status:'default', // default up down
						name:'价格'
					},
					{
						id:4,
						status:'default', // default up down
						name:'筛选'
					},
					
				]
			};
		},
		onLoad(options) {
			// console.log(options);
			this.categoryId = options.id
			this.getProductList()
		},
		onShow(){
			console.log(getApp().globalData.user.name)
		},
		methods:{
			 async getProductList(){
				let res = await findProductList(this.start,this.limit,{				
									"categoryId": this.categoryId,
									"isDesc": this.isDesc,
									"sortBy": this.sortBy
								})
								
				// this.productList = res.data.rows
				this.productList.push(...res.data.rows)
				this.total = res.data.total
				// 手动关闭下拉刷新的进度条
				uni.stopPullDownRefresh()
			},
			resetStartList(){
				this.start = 1
				this.productList = []
			},
			tabbarItemChange(idx){
				this.current = idx
				
				this.tabbarList.forEach((item,index)=>{
					if(idx !== index){
						item.status = 'default'
					}
				})
				if(idx === 1){
					this.sortBy = "sale"
				}else if(idx === 2){
					this.sortBy = "price"
				}
				
				let item = this.tabbarList[idx]
				if(item.status === 'default' || item.status === 'down'){
					item.status = "up"
					this.isDesc = 1
				}else if(item.status === 'up'){
					item.status = "down"
					this.isDesc = 0
				}
				// 重置
				this.resetStartList()
				// 获取数据
				this.getProductList()
				
			},
			// 跳转商品详情
			goProductDeatail(id){
				uni.navigateTo({
					url:`/pages/productDetail/productDetail?id=${id}`
				})
			}
		},
		
		// 下拉刷新
		onPullDownRefresh(){
			this.resetStartList()
			this.getProductList()
		},
		// 上拉加载更多数据
		onReachBottom(){
			if(this.total > this.productList.length){
				this.start++
				this.getProductList()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.kind{
	background-color: #f1ece7;
	overflow: hidden;
	.tabbar-container{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #354e44;
		height: 80rpx;
		.tabbar-item{
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.title{
				color: #fff;
			}
			.red{
				color: red;
			}
			.arrow-container{
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.icons{
					font-weight: bolder;
				}
			}
		}
	}
	.product-list{
		width:calc(100% - 80rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin: 40rpx;
		.item{
			width: 48%;
			background-color: #fff;
			margin-bottom: 40rpx;
			.img{
				width: 100%;
			}
			.item-info{
				padding: 0 20rpx;
				box-sizing: border-box;
				.name{
					font-size: 20rpx;
					font-weight: 500;
				}
				.extra-info{
					display: flex;
					justify-content: space-between;
					.price,.tag{
						font-size: 14rpx;
						
					}
				}
			}
		}
	}
}
</style>
